<template>
  <!--头部导航-->
  <header>
    <div class="learingHeader">
      <nav class="navbar">
        <div class="">
          <div class="logo"><img src="/static/img/asset-logoIco.png" width="100%"></div>
          <div class="nav-list">
            <ul class="nav navbar-nav">
              <li><a href="/">首页</a></li>
              <li>
                <nuxt-link class="title-link" to="/course/search">课程搜索</nuxt-link>
              </li>
              <li></li>
            </ul>
          </div>

          <div class="sign-in">
            <!-- 未登录 -->
            <!-- <a href="#">登录 </a> <span> | </span> <a href="#"> 注册</a>-->
            <!-- 登录 -->
            <!-- <a href="#" class="personal"><span class="personalIco"></span>消息</a>
             <a href="#" class="personal">购物车</a>

             <a href="#" class="myInfo"><img src="/static/img/asset-myImg.jpg" alt="">个人中心</a>-->
            <span v-if="logined == true">欢迎{{this.user.username}}</span>
            <a href="http://ucenter.sfs.com/" class="personal" target="_blank">我的学习</a>
            <a href="javascript:;" @click="logout" v-if="logined == true">退出</a>
            <a href="javascript:;" @click="showlogin" v-if="logined == false">登陆&nbsp;|&nbsp;注册</a>
            <el-dialog title="登陆|注册" :visible.sync="LoginFormVisible">
              <login-form></login-form>
            </el-dialog>
            <a href="http://teacher.sfs.com/" class="personal" target="_blank">教学提供方</a>
            <a href="http://system.sfs.com/" class="personal" target="_blank">系统后台</a>
          </div>
          <div class="starch">
            <div><input type="text" class="input-search" v-model="keyword" @keyup.enter="search" placeholder="输入查询关键词">
            </div>
            <div class="searchword"><a @click="search">搜索</a></div>
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>
<script>
    // import utilApi from '~/api/utils'
    import utilApi from '../api/utils'

    import loginForm from '~/components/loginForm.vue'
    import * as loginApi from '../api/login'

    let Base64 = require('js-base64').Base64;

    export default {
        components: {
            loginForm
        },
        head: {
            link: [
                {rel: 'stylesheet', href: '/static/plugins/normalize-css/normalize.css'},
                {rel: 'stylesheet', href: '/static/plugins/bootstrap/dist/css/bootstrap.css'},
                {rel: 'stylesheet', href: '/static/css/page-learing-index.css'},
                {rel: 'stylesheet', href: '/static/css/page-header.css'},
            ]
        },
        data() {
            return {
                keyword: '',
                logined: false,
                LoginFormVisible: false,
                user: {
                    userid: '',
                    username: '',
                    userpic: ''
                },
            }
        },
        methods: {
            search() {
                if (this.keyword === '') {
                    this.$router.push(`/course/search`)
                } else {
                    let keyword = encodeURIComponent(this.keyword)
                    this.$router.push(`/course/search?keyword=` + keyword)
                }
            },
            //退出登录
            logout: function () {
                this.$confirm('确认退出吗?', '提示', {}).then(() => {
                    //跳转到统一登陆
                    window.location = "http://ucenter.sfs.com/#/logout"
                }).catch(() => {

                });
            },
            refresh_user: function () {
                //从sessionStorage中取出当前用户
                let activeUser = utilApi.getActiveUser();
                //取出cookie中的令牌
                let uid = utilApi.getCookie("uid");
                if (activeUser && uid && uid == activeUser.uid) {
                    this.logined = true;
                    this.user = activeUser;
                } else {
                    //未登录
                    if (!uid) {
                        return;
                    }
                    //请求查询jwt,获取jwt身份令牌内容
                    loginApi.getjwt().then((res) => {
                        if (res.success) {
                            //获取身份令牌内容
                            let jwt = res.jwt;
                            //解析jwt身份令牌中的用户信息
                            let activeUser = utilApi.getUserInfoFromJwt(jwt);
                            if (activeUser) {
                                this.logined = true;
                                this.user = activeUser;
                                //将用户身份信息设置到sessionStorage中
                                utilApi.setUserSession("activeUser", JSON.stringify(activeUser))
                            }
                        }
                    })
                }
            },
            // refresh_user:function(){
            //     debugger
            //     let activeUser= utilApi.getActiveUser();
            //
            //     if(activeUser){
            //         this.logined = true;
            //         this.user = activeUser;
            //         console.log(this.user.username)
            //     }
            // },
            showlogin: function () {
                window.location = "http://ucenter.sfs.com/#/login?returnUrl=" + Base64.encode(window.location)
                // this.returnUrl = window.location;
                // this.LoginFormVisible = true;
            }
        },
        mounted() {
            this.refresh_user()
        }
    }
</script>
<style lang="postcss">

</style>
